<template>
  <el-select
    :model-value="props.value"
    class-name="m-2"
    filterable
    allow-create
    clearable
    placeholder="请选择"
    @change="valueOnChange"
    style="margin-bottom: 22px"
  >
    <el-option v-for="item in columnOptions" :key="item.value" :label="item.label" :value="item.value" />
  </el-select>
</template>

<script setup lang="ts" name="SelectFormItem">
import { useDimensionOptions } from "@/hooks/useDimensionOptions";

interface SearchFormItem {
  columnOptions: string;
  value: any;
}

const props = defineProps<SearchFormItem>();

const { columnOptions } = useDimensionOptions(props.columnOptions);

const emit = defineEmits<{
  "update:value": [value: string | Array<string>];
}>();
const valueOnChange = (value: string) => {
  emit("update:value", value);
};
</script>
